<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 样式类名操作 针对css3 添加 移除 切换 -->
		<!-- 
			addClass()   有参： ----一参 ，多参
							语法：addClass("类名")
							语法: addClass("类名1 类名2")
							匹配元素集合中的所有元素，添加一个或多个类名
			removeClass()
			toggleClass()  功能：有就移除 无就添加
			hasClass()	   共能： 检查匹配集合中是否包含指定元素
							返回值 boolern
			-->
			<script src="../js/jquery-1.11.1.js"></script>
			<style>
				.bgcolor{
					width: 300px;
					height: 300px;
					background: #cbc9ff;
				}
				.borders{
					border: 10px solid #ff0;
					border-radius: 300px;
				}
			</style>
	</head>
	<body>
		<div id="targetElement"></div>
		<button id="addClassBtn">添加类名</button>
		<button id="removeClassBtn">移除类名</button>
		<button id="toggleClassBtn">切换类名</button>
		<button id="hasClassBtn">检查类名是否存在</button>
		<div id="resulArea"></div>
		
		
		<script>
			
			//点击 添加类名 按钮 300*300 红色
			$("#addClassBtn").click(function(){
				$("#targetElement").addClass("bgcolor borders");
				$("#resulArea").html("<h4>添加样式</h4>")
			})
			$("#removeClassBtn").click(function(){
				$("#targetElement").removeClass("bgcolor borders")
				$("#resulArea").html("移除类名")
			})
			$("#toggleClassBtn").click(function(){
				$("#targetElement").toggleClass("bgcolor borders")
				$("#resulArea").html("切换类名")
			})
			$("#hasClassBtn").click(function(){
				var hc=$("#targetElement").hasClass("borders")
				$("#resulArea").text(hc)
			})
		</script>
	</body>
</html>